<template>
	<div id="content">
		<Header />
		<div class="bread">
			<div class="cont w1200">
				<img src="../../../assets/img/location.png" alt=""><a><router-link
						to="/portal/index">首页</router-link></a> > <a><router-link
						to="/portal/net">网谷里</router-link></a>><a>民情动态</a>
				<a href="" class="back"><img src="../../../assets/img/back.png" alt=""><router-link
						to="/portal/net">返回上一级</router-link></a>
			</div>
		</div>
		<div class="inner">
			<div class="net w1200">
				<h3>民情动态</h3>
				<div class="form">
					<div class="form-left">
						<div class="btnL active">
							<img src="../../../assets/img/left-bar1-hover.png" alt="">
							<img src="../../../assets/img/left-bar1.png" alt=""><router-link
								to="/portal/net/trendsAdd">新建动态</router-link>
						</div>
						<div class="btnL">
							<img src="../../../assets/img/left-bar2-hover.png" alt="">
							<img src="../../../assets/img/left-bar2.png" alt=""><router-link
								to="/portal/net/trends">历史记录</router-link>
						</div>
					</div>
					<div class="form-right">
						<div class="title">
							<div class="line"></div>新建动态
						</div>
						<div class="form-detail">
							<div class="input1">
								<span>*</span>
								标题
								<input type="text" placeholder="请输入标题" v-model="title">
							</div>
							<div class="input2">
								<div class="name">
									<span>*</span>内容
									<div class="num">{{ content.length }}/2000</div>
								</div>
								<editor v-model="content" placeholder="请输入内容" :min-height="300" />
							</div>
							<!--							<div class="sub-title">-->
							<!--								<div class="cont">-->
							<!--									<div class="line"></div>相关材料-->
							<!--									<span prop="attachmentUrl"></span>-->
							<!--								</div>-->
							<!--								<file-upload v-model="attachmentUrl" :limit="1" />-->
							<!--							</div>-->
							<div class="sub-title">
								<div class="cont">
									<div class="line"></div>联系对象
								</div>
							</div>
							<div class="slect-group bob">
								<div class="gruop" :class="{ 'active': role == 1 }" @click="changeRole(1)">
									人大街工委
								</div>
								<div class="gruop" :class="{ 'active': role == 2 }" @click="changeRole(2)">
									人大代表
								</div>
							</div>
							<div class="slect-group" v-if="role == 1">
								<div class="tit">选择街道</div>
								<div class="gruop" v-for="(item, index) in StreetInfo"
									:class="{ 'active': item.checked }" @click="selectStreetName(index)" width="140px">
									{{ item.streetName }}
								</div>
							</div>
							<div class="slect-group" v-if="role == 2">
								<div class="tit">选择代表</div>
								<div class="gruop" v-for="(item, index) in roleuserinfoList"
									:class="{ 'active': item.checked }" @click="selecRoleName(index)" width="140px">
									{{ item.name }}
								</div>
							</div>
							<div class="confirm-btn" @click="confirm()">
								提交
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<Contact />
	</div>

</template>

<script>
import Header from '@/components/Header';
import Contact from '@/components/Contact';
import { getTrendsUserList, addTrends } from "@/api/website";
import { listStreetInfoAll } from "@/api/StreetInfo/StreetInfo";
import { listUserinfoByRole } from "@/api/userinfo/userinfo";
export default {
	data() {
		return {
			role: "1",
			userInfo: "",
			currentUser: [],
			userList: [],
			roleuserinfoList: [],
			StreetInfo: [],
			title: "",
			content: "",
			attachmentUrl: null,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				name: null,
				communityName: null,
				representatives: null,
				streetName: null,
			}
		}
	},
	components: {
		Header,
		Contact
	},
	created() {
		this.userInfo = JSON.parse(sessionStorage.getItem("useInfo"))
		this.getStreetList();
		this.getListByRole();
	},
	mounted() {

	},
	methods: {
		// getData() {
		// 	getTrendsUserList({ parentId: this.userInfo.parentId, role: this.userInfo.role }).then(response => {
		// 		for (const key in response) {
		// 			response[key].checked = false;
		// 		}
		// 		response[0].checked = true;
		// 		this.currentUser = response[0];
		// 		this.userList = response;
		// 	});
		// },
		//查询人大代表
		getListByRole() {
			this.queryParams.role = 2
			listUserinfoByRole(this.queryParams).then(response => {
				this.roleuserinfoList = response.data;
				response.data[0].checked = true;
				this.currentUser = response.data[0];
			});
		},
		getStreetList() {
			listStreetInfoAll('').then(response => {
				this.StreetInfo = response;
				response[0].checked = true;
				this.currentUser = response[0];
			});
		},
		confirm() {
			if (!this.title) {
				this.$modal.msgError("请输入标题");
				return
			}
			if (!this.content) {
				this.$modal.msgError("请输入服务内容");
				return
			}
			addTrends({
				"voterId": this.userInfo.id,
				"voterName": this.userInfo.name,
				"contactInfo": this.userInfo.phone,
				"constituencyId": this.currentUser.addr,
				"representativeId": this.currentUser.id,
				"title": this.title,
				"material": this.attachmentUrl,
				"content": this.content,
				"submitTime": new Date(),
				"contactPerson": this.currentUser.id
			}).then(response => {
				this.$router.push('/portal/net/trends');
			});
		},
		selectStreetName(index) {
			let array = this.StreetInfo
			for (const key in array) {
				if (key == index) {
					array[key].checked = true;
					this.$set(this.StreetInfo, key, array[key]);
					this.currentUser = array[key];
				} else {
					array[key].checked = false;
				}
			}
			

		},
		selecRoleName(index) {
			let array = this.roleuserinfoList
			for (const key in array) {
				if (key == index) {
					array[key].checked = true;
					this.$set(this.roleuserinfoList, key, array[key]);
					this.currentUser = array[key];
				} else {
					array[key].checked = false;
				}
			}
			this.roleuserinfoList = array;
		},
		changeRole(role) {
			this.role = role;
		},
	}

};
</script>

<style scoped lang="scss"></style>
